<template>
  <api-base-component
    @copy="copyRow"
    @remove="remove"
    :data="controller"
    :show-collapse="false"
    :draggable="draggable"
    :is-max="isMax"
    :show-btn="showBtn"
    color="#6D317C"
    background-color="#FCF6EE"
    :title="$t('api_test.automation.transcation_controller')">

    <template v-slot:headerLeft>

      <el-input draggable size="mini" v-model="controller.name" style="width: 20%" :placeholder="$t('api_test.automation.transcation_controller')"/>
      <el-checkbox v-model="controller.generateParentSample" style="margin-left: 20px" @change="changeGenerateParantSample">Generate Parent Sample</el-checkbox>
      <el-checkbox v-model="controller.includeTimers" @change="changeIncludeTimers">Include Timers</el-checkbox>
    </template>

  </api-base-component>
</template>

<script>
  import ApiBaseComponent from "../common/ApiBaseComponent";

  export default {
    name: "MsTransactionController",
    components: {ApiBaseComponent},
    props: {
      controller: {},
      node: {},
      isMax: {
        type: Boolean,
        default: false,
      },
      showBtn: {
        type: Boolean,
        default: true,
      },
      index: Object,
      draggable: {
        type: Boolean,
        default: false,
      },
    },
    created() {
      if(this.controller.generateParentSample == null){
        this.controller.generateParentSample = true;
      }
      if(this.controller.includeTimers == null){
        this.controller.includeTimers = true;
      }
    },
    data() {
      return {
        operators: {
          EQ: {
            label: "commons.adv_search.operators.equals",
            value: "=="
          },
          NE: {
            label: "commons.adv_search.operators.not_equals",
            value: "!="
          },
          LIKE: {
            label: "commons.adv_search.operators.like",
            value: "=~"
          },
          NOT_LIKE: {
            label: "commons.adv_search.operators.not_like",
            value: "!~"
          },
          GT: {
            label: "commons.adv_search.operators.gt",
            value: ">"
          },
          LT: {
            label: "commons.adv_search.operators.lt",
            value: "<"
          },
          IS_EMPTY: {
            label: "commons.adv_search.operators.is_empty",
            value: "is empty"
          },
          IS_NOT_EMPTY: {
            label: "commons.adv_search.operators.is_not_empty",
            value: "is not empty"
          }
        }
      }
    },
    methods: {
      remove() {
        this.$emit('remove', this.controller, this.node);
      },
      copyRow() {
        this.$emit('copyRow', this.controller, this.node);
      },
      change(value) {
        if (value.indexOf("empty") > 0 && !!this.controller.value) {
          this.controller.value = "";
        }
      },
      changeGenerateParantSample(value){
        this.controller.generateParentSample = value;
        this.$emit('refReload', this.controller, this.controller);
      },
      changeIncludeTimers(value){
        this.controller.includeTimers = value;
        this.$emit('refReload', this.controller, this.controller);
      },
    },
    computed: {
      hasEmptyOperator() {
        return !!this.controller.operator && this.controller.operator.indexOf("empty") > 0;
      }
    }
  }
</script>

<style scoped>
  .ms-btn {
    width: 20%;
    margin-left: 5px;
  }

  .ms-select {
    width: 15%;
    margin-left: 5px;
  }
</style>
